<div id='infoBtns' >
    <div role="group"  class='btn-group' aria-label="Basic example">
        <button type="button" class="btn btn-secondary col-4" onclick="toOtherInfo()">个人资料</button>
        <button type="button" class="btn btn-secondary col-4" onclick="toOtherRack()">他的书架</button>
        <button type="button" class="btn btn-secondary col-4" onclick="toOtherMessage()">留言板</button>
    </div>
    <div id="addFriend">
        <button id="canelAddFriend" type="button" class="layui-btn" onclick="canelAddFriend()" style="display: none">取消</button>
        <input id="addFriendText" type="text" class="form-control" style="display: none;width: 230px" >
        <button id="btnAddFriend" type="button" class="layui-btn layui-btn-normal" onclick="addFriend()" style="width: 100px;float: right;margin-left: 2px">添加好友+</button>
    </div>
</div>
<div id="otherWrap">
    <div id="otherInfo">
        <div id="otherInfoContent" style="display: flex;flex-wrap: wrap">
            <p class="col-6" id="otherName">用户名：<span></span></p>
            <p class="col-6" id="otherPos">所在地：<span></span></p>
            <p class="col-6" id="otherEmail">邮    箱：<span></span></p>
            <p class="col-6" id="otherGrade">年    级：<span></span></p>
        </div>
        <hr>
        <p style="margin-bottom: 20px;margin-left: 30px">愿望单列表:</p>
        <div id="wishlist" style="padding:0 33px">
        </div>
        <hr>
        <p style="margin-bottom: 20px;margin-left: 30px">阅读标签:</p>
        <div id="labellist" style="padding:0 33px">
        </div>
    </div>
    <div id="otherRack" style="display: none;flex-wrap: wrap">
        <div id="otherBookbox"></div>
    </div>
    <div id="otherMessageBoard" style="display: none;">
        <div id="messageContent" style="position: relative;overflow: auto;">
        </div>
        <div id="messagePost" >
            <button id="floatBtn" onclick="btnSlide()">
                留言
            </button>
            <label for="postContent" style="width: 60px;float: left;">留言内容</label>
            <textarea name="message" id="postContent" maxlength="100" placeholder="请输入留言内容......" style="height: 100px;width: 600px"></textarea>
            <button style="margin: 0px auto;display: block" class="btn btn-success" onclick="postMessageToUser()">发布留言</button>
        </div>
    </div>
</div>
<script>
    var otherid;
    var slideofState = 0
    var addFriendstatus = 0
    function renderOtherInfo(userid) {
        $.ajax(
            {
                url: "/getuserdata/"+userid+"/",
                type:'get',
                datatype:'json',
                success:function (data) {
                    console.log(data)
                    if(data.isfriend==="yes"||data.isself ==="yes"){
                        $("#btnAddFriend").css('display','none')
                    }
                    else if (data.isrequesting=="yes"){
                        $("#btnAddFriend").text('已申请').attr('disabled','true')
                    }
                    else {
                        $("#btnAddFriend").css('display','inline-block')
                    }
                    var labellistnode = $("#labellist")
                    var wishlistnode = $("#wishlist")
                    var labellist = data.labellist
                    var wishlist = data.wishlist
                    labellistnode.empty()
                    wishlistnode.empty()
                    $("#otherName>span").text(data.username)
                    $("#otherEmail>span").text(data.email)
                    $("#otherPos>span").text(data.city+"   "+data.school)
                    $("#otherGrade>span").text(data.grade)
                    if(labellist.length===0){
                        var nulltext = $(buildHTML('p','该用户未添加标签',{
                            'style':'margin:20px auto 40px;text-align:center;font-size:23px'
                        }))
                        labellistnode.append(nulltext)
                    }
                    else {for(i = 0;i<labellist.length;i++){
                        var labelele=$("<div class=\"alert alert-primary\" role=\"alert\"> "+labellist[i]+"</div>")
                        labellistnode.append(labelele)
                    }}
                    if(wishlist.length===0){
                        var nulltext = $(buildHTML('p','愿望单暂无书籍',{
                            'style':'margin:20px auto 40px;text-align:center;font-size:23px'
                        }))
                        wishlistnode.append(nulltext)
                    }
                    else {for(j=0;j<wishlist.length;j++){
                        var wishele=$("<div class=\"alert alert-success\" role=\"alert\">\n" +
                            "《"+wishlist[j].title+"》"+wishlist[j].author+
                            "</div>")
                        console.log(wishele)
                        wishlistnode.append(wishele)
                    }}
                }
            }
        )
    }
    function clearOther() {
        $("#otherInfo,#otherRack,#otherMessageBoard").css('display','none')
    }
    function toOtherInfo() {
        clearOther()
        $("#otherInfo").css('display','block')
    }
    function toOtherRack() {
        clearOther()
        $("#otherRack").css('display','flex')
    }
    function toOtherMessage() {
        clearOther()
        $("#otherMessageBoard").css('display','flex')
    }
    function addFriend() {
        if(addFriendstatus===0){
            $("#canelAddFriend,#addFriendText").css('display','inline-block')
            $("#btnAddFriend").text("发送申请")
            addFriendstatus=1
        }
        else {
            $.ajax({
                url:"{% url 'addfriend'%}",
                type:'post',
                datatype:'json',
                data:{'id':otherid,'message':$("#addFriendText").val()},
                success:function (data) {
                    popMessage(data.status)
                }
            })
            $("#canelAddFriend,#addFriendText").css('display','none')
            $("#btnAddFriend").text("已申请").attr('disabled','true')
            addFriendstatus=0
        }
    }
    function canelAddFriend() {
        $("#canelAddFriend,#addFriendText").css('display','none')
        $("#btnAddFriend").text("添加好友+")
        addFriendstatus=0
    }
    function postMessageToUser(){
        if($("#postContent").val()===""){
            popMessage("请输入留言内容")
        }
        else {$.ajax(
            {
                url:"{% url 'sendleavemessage' %}",
                datatype:'json',
                type:'post',
                data:{'message':$("#postContent").val(),'userid':otherid,csrfmiddlewaretoken: '{{ csrf_token  }}'},
                success:function(data){
                    m = $("<li>\n" +
                        "            <div>"+data.leaver+" <span>发表于"+data.sendtime+"</span></div>\n" +
                        "            <p>"+data.message+"</p>\n" +
                        "            <hr>\n" +
                        "        </li>")
                    $("#messageContent .nullnode").remove()
                    $("#messageContent").append(m)
                    $("#postContent").val("")
                    btnSlide()
                    popMessage("留言成功")
                }
            }
        )}
    }

    function btnSlide() {
        if(slideofState===0){
            $("#messagePost").animate({bottom:'+=190px'});
            slideofState = 1;
        }
        else{
            $("#messagePost").animate({bottom:'-=190px'});
            slideofState = 0;
        }
    }
</script>